<template>
  <view class="page-container">
    <view v-if="!isLogin" class="no_login_wrap">
      <image src="../../../static/img/user/no_login.png" mode="aspectFill"></image>
      <h4>需要登录才可以使用该功能哦~</h4>
      <button @tap="jumpLogin">立即登录</button>
    </view>
    <view v-else class="logined_wrap">
      <view class="subject-wrap" v-for="(item,index) in collectList" :key="index" @tap="jumpDetail(item)">
        <image class="avatar" :src="item.thumb" mode="scaleToFill"></image>
        <!-- <view class="avatar"></view> -->
        <view class="subject-content">
          <view class="title">{{item.title1}}</view>
          <view class="date">{{item.date}}</view>
        </view>
      </view>
      <view v-if="collectList.length == 0" class="no-data">
        <image src="../../../static/img/user/no_collect.png" mode="widthFix"></image>
        <view class="uni-h5">
          您还没有收藏的文章哦~
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    getMyFavorite
  } from '@/utils/api';
  export default {
    name: 'MyCollect', // 我的收藏
    data() {
      return {
        isLogin: false,
        hasNextPage: false,
        page: 1,
        collectList: []
      }
    },
    onShow() {
      let auth_token = uni.getStorageSync("auth_token");
      if (auth_token) {
        this.isLogin = true;
        this.collectList = [];
        this.queryList()
      } else {
        this.isLogin = false;
      }
    },
    onReachBottom() {
      if (this.hasNextPage) {
        this.queryList(); // 获取数据
      }
    },
    methods: {
      // 跳转到登录页面
      jumpLogin() {
        uni.navigateTo({
          url: '/pages/login/login'
        })
      },
      async queryList() {
        const params = {
          limit: 10,
          page: this.page
        }
        let res = await getMyFavorite(params);
        if (res.status === 0) {
          this.hasNextPage = res.data.hasNextPage;
          if (this.hasNextPage) {
            this.page++
          }
          this.collectList = this.collectList.concat(res.data.docs);
        }
      },
      // 跳转详情页面
      jumpDetail(record) {
        if (record.type === 'Video') {
          // http://localhost:8080/#/pages/liveNotStart/liveNotStart?id=5d8db83bbcb25b2bb8983265&ad=
          uni.navigateTo({
            url: `/pages/liveNotStart/liveNotStart?id=${record.id}`
          })
        } else if (record.type === 'News') {
          uni.navigateTo({
            url: `/pages/zazhi/zazhi?id=${record.id}`
          })
        }
      }
    }
  }
</script>

<style>
  @import url("../../../static/style/no_login.css");

  page {
    height: 100%;
    border-top: 2upx solid #E3E3E3;
  }

  .page-container {
    height: 100%;
    padding: 0 30upx;
  }

  .subject-wrap {
    margin-top: 20upx;
    padding: 10upx;
    /* background: #F4F4F4; */
    display: flex;
  }

  .avatar {
    width: 200upx;
    height: 120upx;
    background: #946EE1;
    flex-shrink: 0;
    margin-right: 40upx;
  }

  .subject-content {
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
  }

  .title {
    font-size: 30upx;
    color: #333;
    line-height: 36upx;
    min-height: 65upx;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .date {
    font-size: 24upx;
    line-height: 24upx;
    color: #999;
    /* align-self: st */
  }

  /* 暂无数据 */
  .no-data {
    margin-top: 176upx;
    text-align: center;
  }

  .no-data image {
    width: 460upx;
  }

  .no-data .uni-h5 {
    color: #BBD5EF;
    margin-top: 36upx;
    font-size: 30upx;
    font-weight: 400;
  }
</style>
